<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>学生信息班级男女人数统计</title>
    <!-- 引入Echarts的JavaScript文件，可从官网下载后放在本地项目中引用，也可使用在线CDN链接 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <style>
        /* 整体页面布局样式，可以根据实际需求调整 */
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        /* 图表容器样式 */
        #chart {
            width: 800px;
            height: 600px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div id="chart"></div>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart'));
        // 从后端传递过来的数据，Flask会将data传递到这里
        var data = {{ data|tojson }};
        var chartData = [];
        for (var i = 0; i < data.length; i++) {
            var classId = data[i].classId;
            var maleCount = data[i].maleCount;
            var femaleCount = data[i].femaleCount;
            var totalCount = maleCount + femaleCount;
            chartData.push({
                name: classId + '（男）',
                value: maleCount
            });
            chartData.push({
                name: classId + '（女）',
                value: femaleCount
            });
        }

        // 定义颜色主题，可根据喜好调整
        var colorTheme = ['#5470C6', '#91CC75', '#EE6666', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4', '#ea7ccc'];

        // 指定图表的配置项和数据，进行更详细的配置以美化图表
        var option = {
            title: {
                text: '各个班级男女人数统计',
                textStyle: {
                    fontSize: 20,
                    fontWeight: 'bold',
                    color: '#333'
                },
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.name + ' : ' + params.value + '人';
                }
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                textStyle: {
                    color: '#666'
                }
            },
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '60%'],
                    center: ['50%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'outside',
                        formatter: '{b} : {c}人 ({d}%)',
                        color: '#333',
                        fontSize: 14
                    },
                    labelLine: {
                        show: true
                    },
                    data: chartData,
                    itemStyle: {
                        // 为每个扇形设置颜色，循环使用颜色主题中的颜色
                        color: function (params) {
                            return colorTheme[params.dataIndex % colorTheme.length];
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>